<template>
  <div>
    <Table :columns="columns" :data="headerForm" height="300">
      <template slot-scope="{ row, index }" slot="key">
        <AutoComplete
            v-model="headerForm[index]['key']"
            :data="HeadersDataName"
            :filter-method="filterMethod"
            placeholder="请输入"
        />
      </template>
      <template slot-scope="{ row, index }" slot="value">
        <AutoComplete
            v-model="headerForm[index]['value']"
            :data="HeadersDataValue"
            :filter-method="filterMethod"
            placeholder="请输入"
        />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Button type="primary" style="display:block;margin:20px auto;width: 300px" @click="handleAdd">添加请求头</Button>
  </div>
</template>

<script>

const columns = [
  {
    title: 'key',
    key: 'key',
    slot: 'key'
  },
  {
    title: 'value',
    key: 'value',
    slot: 'value'
  },
  {
    title: '操作',
    slot: 'action',
    width: 120,
    align: 'center'
  }
]

export default {
  name: "headers",
  props: {
    header:{
      type: Array
    }
  },
  data() {
    return {
      HeadersDataName : [
        "Content-Type",
        "Accept",
        "Accept-Charset",
        "Accept-Encoding",
        "Accept-Language",
        "Accept-Ranges",
        "Content-Length",
        "Authorization",
        "Proxy-Authorization",
        "Cache-Control",
        "Cookie",
        "Date",
        "Host",
        "User-Agent",
        "Referer"
      ],
      HeadersDataValue:["application/json", "application/xml"],
      columns,
      headerForm: []
    }
  },
  watch: {
    'header': {
      deep: true,
      immediate: true,
      handler: function (v) {
        this.headerForm = v
      }
    },
    'headerForm': {
      handler(v) {
        this.$emit("changeHeaders", v)
      }
    }
  },
  methods:{
    handleAdd() {
      this.header.push({
        key:"",
        value:""
      })
    },
    remove(index) {
      this.header.splice(index, 1);
    },
    filterMethod (value, option) {
      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
    }
  }
}
</script>

<style scoped>
.div.jsoneditor-outer {
  height: 450px;
}
</style>
